<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/10/3 0003
  Time: 21:02
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/bootstrap.min.css">
    <link href="<%=request.getContextPath()%>/css/choose.css" rel="stylesheet" type="text/css">


    <link href="<%=request.getContextPath()%>/css/index01.css" rel="stylesheet">
    <link href="<%=request.getContextPath()%>/css/loading.css" rel="stylesheet" type="text/css">
    <style>
        .question_info{
            height: 100px;
            padding-left: 0px;
            /*background-color: red;*/
            /*border: 5px solid ;*/
        }
        textarea{
            height: 100%;
            width: 100%;
        }

    </style>


</head>
<body>
<%--导航条--%>
<%@include file="../common/nav.jsp"%>


<div style="margin-top: 50px;">
    <div class="col-md-1"></div>
    <div class="col-md-10">
        <div class="content">
            <div style="width: 100%;height:auto;display: inline-block;border: 1px solid white;position: relative;margin-top:10px;">
                <div style="width: 100%;">
                    <div style="width: 80%;margin: 0px auto">
                        <div style="width: 100%;height:100px;border: 1px solid #CCC;border-bottom:none;background:#FFF;">
                            <div class="middle-top" style="width: 100%;height: 50px;border-bottom: 1px solid #CCC;background:#000; position:relative;">
                                <div class="middle-top-left pull-left"
                                     style="height: 90%;padding-left: 0px;background:#000;color:#FFF;">
                                    <div class="text-center pull-left progress-left"
                                         style="border: 1px solid #A2C69A;background:#FFF;border-radius:10px;line-height:20px;height:20px;margin:15px 0px 15px 0px;font-size: 11px;position:relative;">
                                        <%--进度条移动到的位置--%>
                                        <div class="progress pull-left"
                                             style="background: #609E53;width: 0px;height:18px;position:absolute;left: 0px;"></div>
                                        <%--进度条中的进度信息--%>
                                        <div class="pro-text" style="left: 0px;color: #609E53;position:absolute;top:0px;width:100%;"> 已完成<span class="progres"></span></div>
                                    </div>
                                    <div class="pull-left" style=" width:135px;line-height:20px;height:20px;margin:15px;font-size:15px;">
                                        <!--已做答的数量和考题总数-->
                                        当前第<span class="questioned"></span>题/共<span class="question_sum"></span>题 </div>
                                </div>
                                <div class="middle-top-right text-center pull-left"
                                     style="width:160px; height: 100%;border-left: 1px solid red;position: absolute;right: 0px;">
                                    <div class="stop pull-left" style="width: 50px; height: 100%;padding: 10px;"> <a href="javascript:void(0);" class="text-center" style="color: #FE6547;">
                                        <div class="time-stop glyphicon glyphicon-pause" title="暂停"
                                             style="width:30px;height: 30px;line-height:30px; border-radius:15px;border: 1px solid #FE6547;"></div>
                                        <div class="time-start glyphicon glyphicon-play" title="开始"
                                             style="width:30px;height: 30px;line-height:30px;border-radius:15px;border: 1px solid #FE6547;display:none;"></div>
                                    </a> </div>
                                    <div class="pull-left"  style="width: 100px; height: 100%;padding: 10px 0px 10px 0px;">
                                        <div class="time" style="width:100px;height: 30px;line-height:30px; border-radius:15px;font-size:20px;color:#FFF;"> </div>
                                    </div>
                                </div>
                            </div>
                            <div style="width: 100%;height: 50px;font-size:15px;color: #000;line-height: 50px;padding-left: 20px;">
                                <div style="color:#FFF;background: red;width: 22px;height: 22px;border-radius:11px;line-height:22px;font-size:13px; text-align: center;"
                                     class="glyphicon glyphicon-map-marker"></div>
                                [填空题] </div>
                        </div>
                        <div style="width: 100%;height:auto;display: inline-block;border: 1px solid #CCC;border-bottom:1px dashed #CCC;background:#FFF;">
                            <div style="width: 100%;height: 50%;padding:20px 20px 0px 20px;">
                                <!--试题区域-->
                                <ul class="list-unstyled question" id="" name="">
                                    <li class="question_title"></li>

                                </ul>
                                <!--考题的操作区域-->
                                <div class="operation" style="margin-top: 20px;">
                                    <div class="text-left"
                                         style="margin-left:20px;font-size: 15px;float: left;line-height: 30px;">
                                        <%--收藏按钮--%>
                                        <div class="collection" id="heart" style="color:#999999;"> <span class="glyphicon glyphicon-heart-empty"></span> <span class="tex" id="">收藏本题</span> </div>
                                    </div>
                                    <div class="text-right" style="margin-right: 20px;">
                                        <div class="form-group" style="color: #FFF;">
                                            <a><button class="btn btn-info" id="uponQuestion">上一题</button></a>
                                            <a><button class="btn btn-info" id="nextQuestion">下一题</button></a>
                                            <a><button class="btn btn-success" id="submitQuestions">下一项</button></a>
                                        </div>
                                    </div>
                                    <div id="judgment" style=" font-size: 20px;font-weight: bolder; color: red">
                                    </div>
                                    <div id="tru" style=" font-size: 20px; color: black">
                                    </div>

                                </div>
                            </div>
                        </div>
                        <div style="width: 100%;height:auto;display: inline-block;border: 1px solid #CCC;border-top:none;background:#FFF;">
                            <div style="width: 100%;padding:20px;">
                                <div class="panel-default">
                                    <div class="panel-heading" class="panel-heading" id="closeCard" style="color: #DCE4EC;font-size: 15px;display: none;background: none;">
                                        <span>收起答题卡</span> <span class="glyphicon glyphicon-chevron-up"></span> </div>
                                    <div class="panel-heading" id="openCard" style="font-size: 15px;background: none;"> <span>展开答题卡</span> <span class="glyphicon glyphicon-chevron-down"></span> </div>
                                    <%--整个答题卡的数字展示--%>
                                    <div id="answerCard" style="display: none;">
                                        <div class="panel-body form-horizontal" style="padding: 0px;">
                                            <ul class="list-unstyled">
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
<div class="col-md-1"></div>
</div>

</body>

<script src="<%=request.getContextPath()%>/js/jquery.min.js"></script>
<script src="<%=request.getContextPath()%>/js/bootstrap.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/Questions.js"></script>
<script>
    var timeState = true;//时间状态 默认为true 开启时间
    //获取后端传来的json文件
    var parper= ${parper};
    var parperId = parper.parperId;
    var questions = parper.completionList;
    var testId = parper.testId;//考试号
    console.log(testId);
    var activeQuestion=0; //当前操作的考题编号
    var questioned = 0; //当前第几题
    var checkQues = []; //已做答的题的集合
    let emp  = "<span>答案不能为空</span> ";

    /*实现计时器*/
    setInterval(function () {
        if (timeState) {
            var testEnd = parper.testEnd;//考试结束时间
            var nowDate = new Date();//现在的时间
            var nowTime = nowDate.getTime();//现在的long毫秒数
            var countDown = (testEnd - nowTime)/1000;//剩余时间秒数

            var hour = Math.floor(countDown / 3600);//小时
            countDown %= 3600;//小时后余下的秒数
            var minute  = Math.floor(countDown / 60);//分钟
            countDown %= 60;//余下秒数
            var second  = Math.floor(countDown);//秒
            var str = hour + ":" + minute + ":" + second;
            $(".time").text(str);
        } else {
            $(".time").text(str);
        }
    }, 1000);//每秒刷新一次


    //展示考卷信息
    function showQuestion(id){

        //.questioned当前第几题
        $(".questioned").text(id+1);
        // 当前第几题 =      json的长度
        questioned = (id+1)/questions.length
        //当前操作的考试题号 !=
        if(activeQuestion!=undefined){
            // 答题卡上数字                        移除class属性               增加class属性
            $("#ques"+activeQuestion).removeClass("question_id").addClass("active_question_id");
        }
        //当前操作的考题编号 = id
        activeQuestion = id;
        $(".question").find(".question_info").remove();
        //     第id个json
        var question = questions[id];
        /**
         展示题目
         */
        //li  的 html 内容                                               json.题目
        $(".question_title").html("<strong>第 "+(id+1)+" 题 、</strong>"+question.comStem);
        /**
         * 展示选项
         */
        var item="";
        //           答案的class           点击答案事件  this是li              id等于0 + i
        // item ="<li class='question_info' onclick='clickTrim(this)' id='item"+id+" '>" + "<input id='answer' type='text' name='item' ></li>";
        item ="<li class='question_info' onclick='clickTrim(this)'  >" + " <textarea class='usanswer' type='text' id='item"+id+"'></textarea></li>";


        //将li内容添加到ul中,循环一次添加一次
        $(".question").append(item);


        //ul  设置ul的id值为question0,1,2,3...
        $(".question").attr("id","question"+id);

        //收藏按钮
        $(".collection").attr("id","heart"+id);
        $(".tex").attr("id","tex"+id);
        //默认不收藏
        $("#heart"+id).css("color","#999999")
        $("#tex"+id).html("收藏本题")

        // 下面展开答题卡上数字    移除class属性更换样式       添加class属性
        $("#ques"+id).removeClass("active_question_id").addClass("question_id");
        //     for循环    已经作答的题目集合
        for(var i=0;i<checkQues.length;i++){
            // 已经作答的id等于  传进来的id
            if(checkQues[i].id==id){
                //回显用户的答案
                $("#"+checkQues[i].item).val(checkQues[i].answer)
                //答题卡上数字                    改变class
                $("#ques"+activeQuestion).removeClass("question_id").addClass("clickQue");

                //收藏按钮
                var tex =  checkQues[i].tex;
                if (tex == "收藏本题"){//现在是未收藏状态
                    $("#heart"+id).css("color","#999999")
                    $("#tex"+id).html("收藏本题")
                }else if(tex == "已收藏"){//现在是收藏状态
                    $("#heart"+id).css("color","#C40000")
                    $("#tex"+id).html("已收藏")
                }
            }
        }
        // 进度条
        progress();

    }

    /*答题卡的点击事件*/
    function answerCard(){
        //共多少题  内容      json长度
        $(".question_sum").text(questions.length);
        for(var i=0;i<questions.length;i++){
            //    答题卡的数字                 点击事件:保存考题状态 已做答的状态
            var questionId ="<li id='ques"+i+"'onclick='CardLi("+i+")' class='questionId'>"+(i+1)+"</li>";
            //答题卡的题目数字   添加li
            $("#answerCard ul").append(questionId);
        }
    }

    function CardLi(li){
        //1. 获取用户填入的数据
        var value = $(".usanswer").val();
        if (value == "") {
            $("#judgment").empty();
            $("#judgment").append(emp);
        }else{
            $("#judgment").empty();
            save();
            showQuestion(li);
        }
    }

    /*选中考题*/
    // 用户输入答案的事件
    function clickTrim(source){
        $("#ques"+activeQuestion).removeClass("question_id").addClass("clickQue");
    }

    /*设置进度条*/
    function progress(){
        var prog = ($(".active_question_id").length+1)/questions.length;
        //            进度条长度
        var pro = $(".progress").parent().width() * prog;
        //  %进度
        $(".progres").text((prog*100).toString().substr(0,5)+"%")
        // 进度条长度
        $(".progress").animate({
            width: pro,
            opacity: 0.5
        }, 1000);
    }

    /*保存考题状态 已做答的状态*/
    function save(){
        //获取用户输入的答案
        var useAnswer = $(".usanswer").val();

        var tex = $("#tex"+activeQuestion).text();
        if (useAnswer != " ") {
            //第一次进来
            if (checkQues.length == 0) {
                var check = {};
                check.parperId = 1;
                check.queType = 3;
                check.queId = questions[activeQuestion].comId; //题库中题目编号
                check.id = activeQuestion;//获取当前考题的编号
                check.item = "item" + activeQuestion;
                check.tex = tex; //收藏状态
                check.answer = useAnswer;//用户的答案
                checkQues.push(check);//添加到已经作答题目集合
            } else {//不是第一次进来
                for (var i = 0; i < checkQues.length; i++) {
                    if (checkQues[i].id != activeQuestion) {                    //题目已经存在
                        //新建一个集合，然后将集合放入数组
                        var check = {};
                        check.parperId = 1;
                        check.queType = 3;
                        check.queId = questions[activeQuestion].comId; //题库中题目编号
                        check.id = activeQuestion;//获取当前考题的编号
                        check.item = "item" + activeQuestion;
                        check.tex = tex; //收藏状态
                        check.answer = useAnswer;//用户的答案
                        checkQues.splice(activeQuestion,1,check);//添加到已经作答题目集合
                    }
                }
            }
        }
        console.log(checkQues)
    }



    $(function(){
        $(".middle-top-left").width($(".middle-top").width()-$(".middle-top-right").width())
        //  整个进度条框
        $(".progress-left").width($(".middle-top-left").width()-200);
        // 进度条
        progress();
        //答题卡的点击事件
        answerCard();
        //展示考卷信息
        showQuestion(0);

        /*收藏按钮的切换*/
        $(".collection").click(function(){
            var queId =  questions[activeQuestion].comId;
            var queType = 3;
            console.log(queId)

            var attrId = $(".collection").attr("id");
            var tex = $("#tex"+activeQuestion).text();
            console.log(tex);
            console.log(attrId);
            if (tex == "收藏本题"){//现在是未收藏状态
                $.post("/yuezhi/parper/addCollect",{"queId":queId,"queType":queType},function (data) {
                    if (data != 0){
                        $("#heart"+activeQuestion).css("color","#C40000")
                        $("#tex"+activeQuestion).html("已收藏")
                    }
                })
            }else if(tex == "已收藏"){//现在是收藏状态
                $.post("/yuezhi/parper/delCollect",{"queId":queId,"queType":queType},function (data) {
                    if (data != 0){
                        $("#heart"+activeQuestion).css("color","#999999")
                        $("#tex"+activeQuestion).html("收藏本题")
                    }
                })
            }
        })

        /*答题卡的切换*/
        $("#openCard").click(function(){
            $("#closeCard").show();
            // 答题卡大框
            $("#answerCard").slideDown();
            $(this).hide();
        })
        $("#closeCard").click(function(){
            $("#openCard").show();
            //答题卡框
            $("#answerCard").slideUp();
            $(this).hide();
        })

        //下一项
        $("#submitQuestions").click(function(){

            var value = $(".usanswer").val();
            if (value == "") {
                $("#judgment").empty();
                $("#judgment").append(emp);
            }else{
                save();
            }
            if (questions.length-(checkQues.length) == 0){
                var checkQues1 =  [];
                for (var i=0; i<checkQues.length; i++){
                    var check = {};
                    check.testId = parper.testId;//考试号
                    check.parperId = parper.parperId;//试卷号
                    check.queType = 3;//题目类型
                    check.queId = checkQues[i].queId; //题库中题目编号
                    check.id = checkQues[i].id + 1;//获取当前考题的编号
                    check.answer = checkQues[i].answer;//用户的答案
                    checkQues1.push(check);//添加到已经作答题目集合
                }
                var checkQues2 = JSON.stringify(checkQues1);//将复制的数组转化为json字符串
                console.log("checkQues2"+checkQues2)


                $.post("/yuezhi/parper/wrongtopicadd",{"checkQues":checkQues2},function (data) {
                    if (data != 0){
                        var testId = parper.testId;
                        window.location="/yuezhi/parper/programe/" +parperId + "/" +testId ;
                    }
                })

                } else{
                    alert("已做答:"+(checkQues.length)+"道题,还有"+(questions.length-(checkQues.length))+"道题未完成");
                }

        })

        //进入上一题
        $("#uponQuestion").click(function(){
            //1. 获取用户填入的数据
            var value = $(".usanswer").val();
            if (value == "") {
                $("#judgment").empty();
                $("#judgment").append(emp);
            }
            else if (value != "") {
                save();
                if ((activeQuestion - 1) >= 0) (showQuestion(activeQuestion - 1))
                else if ((activeQuestion - 1) == questions.length) {
                    showQuestion(activeQuestion)
                }
                $("#judgment").empty();
            }
        })

        //进入下一题
        $("#nextQuestion").click(function(){
            //1. 获取用户填入的数据
            var value = $(".usanswer").val();
            if (value == "") {
                $("#judgment").empty();
                $("#judgment").append(emp);
            }
            else if (value != "") {
                save();
                if ((activeQuestion + 1) != questions.length) {showQuestion(activeQuestion + 1)}
                else if((activeQuestion + 1) == questions.length){
                    showQuestion(activeQuestion);
                }
                $("#judgment").empty();
            }
        })


        //如果考试时间结束
        var testEnd = parper.testEnd;//考试结束时间
        var nowDate = new Date();//现在的时间
        var nowTime = nowDate.getTime();//现在的long毫秒数
        var countDown = (testEnd - nowTime)/1000;//剩余时间秒数
        if (countDown  <= 0){
            save();
            var checkQues1 =  [];
            for (var i=0; i<checkQues.length; i++){
                var check = {};
                check.testId = parper.testId;//考试号
                check.parperId = 1;//试卷号
                check.queType = 1;//题目类型
                check.queId = checkQues[i].queId; //题库中题目编号
                check.id = checkQues[i].id + 1;//获取当前考题的编号
                check.answer = checkQues[i].answer;//用户的答案
                checkQues1.push(check);//添加到已经作答题目集合
            }
            var checkQues2 = JSON.stringify(checkQues1);//将复制的数组转化为json字符串
            console.log("checkQues2"+checkQues2)
            //post请求方式将数据写入request作用域
            // $.post("/yuezhi/parper/wrongtopicadd",{"checkQues":checkQues2},function (data) {
            //     if (data != 0){
            //         var testId = parper.testId;
            //         window.location="/yuezhi/parper/wrong/"+testId ;
            //     }
            // })

        }
    })
</script>


</html>
